<template>
	<div class="el-table el-table-border">
		<div class="el-table_header-wrapper">
			<div class="el-table_header">
				<div class="el-table_row">
					<div class="el-table_cell" v-for="(col,index) in column" :key="index"
						:style="$_methods.setStyle({...col,minWidth:col.width})">
						<div class="cell">{{col.title}}</div>
					</div>
					<!-- <div class="el-table_cell">
						<div class="cell">操作</div>
					</div> -->
					<!-- <slot name="column"></slot> -->
				</div>
			</div>
		</div>
		<div class="el-table_body-wrapper">
			<div class="el-table_body">
				<div class="el-table_row el-table-tr" v-for="(row,index) in data" :key="index">
					<div class="el-table_cell el-table-td" v-for="(col,index) in column" :key="index"
						:style="$_methods.setStyle({...col,minWidth:col.width})">
						<div class="cell">{{row[col.key]?row[col.key]: ''}}</div>
					</div>
					<!-- <div class="el-table_cell el-table-td">
						按钮
					</div> -->
					<!-- <slot name="column"></slot> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'el-table',
		props: {
			column: {
				type: Array,
				require: false,
				default () {
					return []
				}
			},
			data: {
				type: Array,
				require: false,
				default () {
					return []
				}
			},
		},
		data() {
			return {
				key: ''
			}
		},
		// mounted() {
		// 	const criterion = {
		// 		width: 200,
		// 		align: 'center',
		// 		index: 'index'
		// 	};
		// 	const style = this.$_methods.setStyle(criterion);
		// 	console.log(style)
		// },
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.el-table {
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		min-width: 600px;
		max-width: 100%;
		background-color: #fff;
	}

	.el-table-border {
		border: 1px solid #ebeef5;
		border-right: none;
		border-bottom: none;
	}

	.el-table_header-wrapper {
		width: 100%;
		max-width: 100%;
		border-bottom: 1px solid #ebeef5;

		.el-table_header {
			width: 100%;

			.el-table_row {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.el-table_cell {
					display: inline-block;
					box-sizing: border-box;
					position: relative;
					vertical-align: middle;
					padding-left: 10px;
					padding-right: 10px;
					width: 100%;
					text-align: left;
					background: #fff;
					border-right: 1px solid #ebeef5;
				}

				.cell {
					padding: 12px 0;
					color: #909399;
					font-weight: bold;
				}
			}
		}
	}

	.el-table_body-wrapper {
		width: 100%;
		max-width: 100%;

		.el-table_body {
			width: 100%;

			.el-table_row {
				width: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-bottom: 1px solid #ebeef5;


				.el-table_cell {
					display: inline-block;
					box-sizing: border-box;
					position: relative;
					vertical-align: middle;
					padding-left: 10px;
					padding-right: 10px;
					width: 100%;
					text-align: left;
					background: #fff;
					border-right: 1px solid #ebeef5;
				}

				.cell {
					box-sizing: border-box;
					padding: 12px 0;
					min-height: 20px;
					font-size: 14px;
					color: #606266;
				}
			}
		}
	}

	// .el-table .el-table_cell {
	// 	min-width: 0;
	// 	height: 100%;
	// 	box-sizing: content-box;
	// 	text-overflow: ellipsis;
	// 	vertical-align: middle;
	// 	position: relative;
	// 	text-align: left;
	// 	border-right: 1px solid #ebeef5;
	// }
</style>
